<template>
  <div class="cound" ref="cound">

  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted, ref, onBeforeUnmount } from 'vue';
const option = {
  backgroundColor: '#fff',
  globe: {
    baseTexture: '/img/earth.jpg',
    shading: 'lambert',
    atmosphere: {
      show: true
    },
    light: {
      ambient: {
        intensity: 0.4
      },
      main: {
        shadow: true,
        intensity: 1
      }
    }
  },
  series: []
};
const cound = ref<HTMLDivElement>()
let myChart: echarts.ECharts | undefined;
function resize() {
  myChart && myChart.resize()
}
onMounted(() => {
  myChart = cound.value && echarts.init(cound.value);
  myChart && myChart.setOption(option);
  window.addEventListener('resize', resize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})

</script>
<style lang="scss" scoped>
.cound {
  width: 50%;
  height: 400px;
}
</style>